<template>
  <el-container>
    <el-aside :width="menuWidth">
      <h1>
        <img src="../assets/rBlqbKNMpL.png" style="width:40px;height:40px" v-if="isCollapse" />
         <img src="../assets/game-logo.png" v-if="!isCollapse" />
      </h1>

      <el-menu
        default-active="2"
        class="el-menu-vertical-demo"
        @select="select"
        background-color="#001529"
        text-color="#fff"
    
        active-text-color="#ffd04b"
        :collapse="isCollapse"
      >
        <el-menu-item index="/dashboard/heros">
          <i class="el-icon-location"></i>
          <span slot="title"> 英雄资料 </span>
        </el-menu-item>
        <el-menu-item index="/dashboard/equipments">
          <i class="el-icon-menu"></i>
          <span slot="title">装备资料</span>
        </el-menu-item>
        <el-menu-item index="/dashboard/summoners">
          <i class="el-icon-document"></i>
          <span slot="title">技能资料</span>
        </el-menu-item>
        <el-menu-item index="/dashboard/mings">
          <i class="el-icon-setting"></i>
          <span slot="title">铭文资料</span>
        </el-menu-item>

        <el-submenu>
          <template slot="title">
            <i class="el-icon-setting"></i>
            <span>系统设置</span>
          </template>

          <el-menu-item index="/dashboard/users">用户管理 </el-menu-item>
          <el-menu-item index="/dashboard/6-2">角色管理</el-menu-item>
          <el-menu-item index="/dashboard/6-2">权限管理</el-menu-item>
        </el-submenu>
      </el-menu>
    </el-aside>
    <el-container>
      <el-header>
        <div>
          <i class="el-icon-s-unfold" v-if="isCollapse" @click="collapse"></i>
          <i class="el-icon-s-fold" v-else @click="collapse"></i>
        </div>
        <div>
          <el-menu
            :default-active="activeIndex"
            background-color="#001529"
            mode="horizontal"
            text-color="#fff"
            active-text-color="#ffd04b" 

             @select="select"
          >
            <el-menu-item index="/dashboard">
              <i class="el-icon-s-home"></i>
            </el-menu-item>
            <el-submenu index="2">
              <template slot="title">
                <el-avatar>
                  <img src="../assets/images/XbvDOx2Pp8.png" />
                </el-avatar>
              </template>
              <el-menu-item index="/dashboard/users">个人中心</el-menu-item>
              <el-menu-item index="/dashboard/users">个人设置</el-menu-item>
              <el-menu-item index="/login">安全退出</el-menu-item>
            </el-submenu>
          </el-menu>
        </div>
      </el-header>
      <el-main>
        <router-view />
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
export default {
  data() {
    return {
      isCollapse: true, //true表示折叠 false表示展开
      menuWidth: "60px",
    };
  },
  methods: {
    select(index) {
      if("/login" === index){
          this.$store.dispatch("logout");
      }
      this.$router.push({ path: index });

    },
    collapse() {
      this.isCollapse = !this.isCollapse;
      //判断是否折叠 从而设置aside 宽度
      if (this.isCollapse) {
        this.menuWidth = "60px";
      } else {
        this.menuWidth = "300px";
      }
    },
  },
};
</script>

<style scoped>
.el-header {
  display: flex;
  display: -webkit-flex;
  flex-direction: row;
  justify-content: space-between;
  color: white;
  background-color: #001529;
  align-items: center;
}

.el-aside {
  background-color: #001529;
  color: #333;
  text-align: center;
  height: 100%;
  max-width: 200px;
  width: 300px;
}

.el-main {
  background-color: #e9eef3;
  color: #333;
  text-align: center;
}

body > .el-container {
  margin-bottom: 40px;
  height: 100%;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}

.el-menu {
  overflow: hidden;
}

.el-aside h1 {
  height: 60px;
  color: white;
  line-height: 60px;
  /* background-color: rgba(255, 255, 255, 0.1); */
}

.el-aside h1 img {
  width: 150px;
  height: 58px;
  vertical-align: middle;
}

.link {
  text-decoration: none;
  color: white;
}
.link:active {
  color: orange;
}

.el-col {
  border: 1px solid black;
}
.el-menu {
  border: none;
}
</style>